<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_盒子模型练习</title>
    <style>
        /* 卡片容器样式 */
        .card{
            width: 300px;              /* 设置卡片宽度为300像素 */
            padding: 10px;             /* 设置内边距为10像素 */
            margin-bottom: 30px;       /* 设置下外边距为30像素 */
            background-color: #e8e8e8; /* 设置背景颜色为浅灰色 */
            box-sizing: border-box;    /* 使用border-box盒模型 */
        }

        /* 卡片内图片样式 */
        .card>img{
            width: 100%;               /* 图片宽度占满容器 */
        }

        /* 卡片内段落样式 */
        .card>p{
            border: 5px solid red;     /* 设置5像素红色实线边框 */
            margin: 10px 20px 30px 40px; /* 设置外边距：上10px，右20px，下30px，左40px */
        }

    </style>
</head>
<body>
    <div class="card">
        <img src="img/1.png" alt="">
        <p>我是文字</p>
    </div>
    <div class="card">
        <img src="img/1.png" alt="">
        <p>我是文字</p>
    </div>
</body>
</html>